<template>
  <div class="header">
    <div class="header-logo-open">
      <router-link to="/home" class="logo">
        <img src="@/assets/images/footer_img.png" alt="" />
      </router-link>
      <router-link to="/login" class="open">
        <van-button round type="success" color="#f86442" class="open-text">
          打开
        </van-button>
      </router-link>
    </div>
    <div class="header-picture-content">
      <div class="header-bag">
        <div class="header-picture">
          <div class="header-img">
            <img
              :src="'https://imagev2.xmcdn.com/' + albumInfo?.cover"
              alt=""
            />
            <div class="icon-text">
              <i class="icon1"></i>
              <i class="text"> {{ playCount }} </i>
            </div>
          </div>
          <img src="@/assets/images/courseHeader1.png" alt="" class="img" />
        </div>
        <div class="header-content">
          <h1>{{ albumInfo?.title }}</h1>
          <a href="javascript:;" class="content-img">
            <img :src="'https://imagev2.xmcdn.com/' + userInfoImg" alt="" />
            <span>
              <van-text-ellipsis :content="albumInfo?.customTitle" rows="7" />
            </span>
          </a>
          <p>
            已订阅{{ (statCountInfo?.subscribeCount / 10000).toFixed(2) }}万人
          </p>
        </div>
      </div>
    </div>
    <div
      class="header-contentSize"
      :class="{
        header_contentSize2: !iconShow,
      }"
    >
      <div class="content">
        <div v-html="albumRichInfo" class="content-html"></div>
      </div>
      <div class="content-img" v-show="iconShow">
        <i class="icon2" @click="iconHandler"></i>
      </div>
    </div>
    <div class="header-btn">
      <transition>
        <van-button round class="btn my-animation" @click="toLogin"
          >打开APP，完整收听</van-button
        >
      </transition>
    </div>
    <div class="header-list">
      <div class="list-header">
        <h2>节目({{ totalCount }})</h2>
        <span @click="ascHandler">
          <i class="icon3"></i>
          <i>切换顺序</i>
        </span>
      </div>
      <ul class="list-ul">
        <li class="list-li" v-for="item in trackDetailInfos" :key="item.id">
          <a
            :href="`https://m.ximalaya.com${item.pageUriInfo.url}`"
            class="list-a"
          >
            <div class="list-item">
              <i class="icon4"></i>
              <span>{{ item.trackInfo.title }}</span>
            </div>
          </a>
          <a href="javascript:;" class="list-icon">
            <i class="icon5"></i>
          </a>
        </li>
      </ul>
      <div class="list-btn">
        <div class="a" @click="toLogin">
          <p>
            加载更多
            <i>
              <van-icon name="arrow-down" />
            </i>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqQueryAlbumPage, reqQueryAlbumByPage } from "@/apis/courseHeader";
import type { AnyObject } from "@/types/category";
import { computed } from "vue";
import { watch } from "vue";
import { ref } from "vue";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

// 亿和万之间的换算
const formatNumber = (number: number) => {
  if (number >= 100000000) {
    return (number / 100000000).toFixed(2) + " 亿";
  } else if (number >= 10000) {
    return (number / 10000).toFixed(2) + " 万";
  } else {
    // return number.toString();
  }
};

//点击更多等
const toLogin = () => {
  if (localStorage.getItem("xmtoken")) {
    return;
  } else {
    router.push({
      path: "/login",
    });
  }
};

// 接收Id
const props = defineProps<{
  albumId: number;
  userInfoImg: string | undefined;
}>();

// 获取渲染数据
const albumRichInfo = ref<AnyObject>();
const albumInfo = ref<AnyObject>();
const statCountInfo = ref<AnyObject>();
const playCounts = ref<number>(); //数亿/万
const getQueryAlbumPage = async (id: number) => {
  try {
    let result = await reqQueryAlbumPage(id);
    albumRichInfo.value = result.data.albumRichInfo?.richIntro;
    albumInfo.value = result.data.albumDetailInfo?.albumInfo;
    statCountInfo.value = result.data.albumDetailInfo?.statCountInfo;
    playCounts.value = result.data.albumDetailInfo?.statCountInfo.playCount;
  } catch (error) {
    console.log(error);
  }
};
// 计算
const playCount = computed(() => {
  let playCount = formatNumber(playCounts.value!);
  return playCount;
});

// 点击展开
const iconShow = ref(true);
const iconHandler = () => {
  iconShow.value = false;
};

// 点击排序
const ascHandler = () => {
  if (params.value.asc) {
    params.value.asc = false;
  } else {
    params.value.asc = true;
  }
};
// 列表渲染数据
const params = ref<AnyObject>({
  albumId: props.albumId,
  page: 1,
  pageSize: 10,
  asc: true,
  countKeys: "play",
  v: Date.now(),
});
// 列表数据
const trackDetailInfos = ref<AnyObject>([]);
const trackDetail = ref<number>();
const totalCount = ref<number>();
const getQueryAlbumByPage = async (params: AnyObject) => {
  try {
    let result = await reqQueryAlbumByPage(params);
    trackDetailInfos.value = result.data.trackDetailInfos;
    trackDetail.value = result.data.trackDetailInfos[0].trackInfo.anchorId;
    totalCount.value = result.data.totalCount;
  } catch (error) {
    console.log(error);
  }
};
// 数据监听
watch(
  params,
  (nval) => {
    getQueryAlbumByPage(nval);
  },
  { immediate: true, deep: true }
);
onMounted(() => {
  getQueryAlbumPage(props.albumId);
  getQueryAlbumByPage(params.value);
});

defineExpose({
  trackDetail,
});
</script>

<style scoped lang="less">
.header {
  .header-logo-open {
    background-color: rgba(34, 35, 37, 0.8);
    padding: 10px 8px 10px 8px;
    display: flex;
    justify-content: space-between;
    .logo {
      width: 102px;
      height: 36px;
      img {
        margin-top: 3px;
        width: 102px;
        height: 36px;
      }
    }
    .open {
      .open-text {
        color: #fff;
        font-size: 15px;
        width: 62px;
        height: 29px;
        text-align: center;
      }
    }
  }
  .header-picture-content {
    background-color: rgb(131, 68, 61);
    padding: 30px 20px 20px;
    .header-bag {
      display: flex;
      .header-picture {
        display: flex;
        .header-img {
          height: 95px;
          width: 95px;
          img {
            width: 100%;
            height: 100%;
          }
          .icon-text {
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            // margin: -22px 0 0 20px;
            margin-top: -22px;
            text-align: center;
            .icon1::before {
              content: "\e608";
              font-family: "iconfont";
              margin-right: 4px;
            }
          }
        }
        .img {
          width: 24px;
          height: 95px;
        }
      }
      .header-content {
        // margin-left: 15px;
        h1 {
          color: #fff;
          font-size: 17px;
          font-weight: 500;
          margin-top: 5px;
          line-height: 24px;
        }
        .content-img {
          color: #fff;
          position: relative;
          display: inline-block;
          padding-bottom: 5px;
          margin-top: 5px;
          width: 100%;
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
          span {
            display: inline-block;
            margin: -9px 0 0 5px;
            font-size: 12px;
            vertical-align: middle;
          }
          &::after {
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.4);
          }
        }
        p {
          color: #fff;
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
  }
  .header-contentSize {
    height: 160px;
    position: relative;
    overflow: hidden;
    .content {
      margin: 15px 15px 0;
      font-size: 14px !important;
      max-width: 350px !important;

      .content-html {
        ::v-deep img {
          width: 350px;
          height: auto;
        }
        ::v-deep b {
          font-size: 14px;
          color: #333;
        }
        ::v-deep span {
          font-size: 14px;
        }
      }
    }
    .content-img {
      width: 100%;
      height: 160px;
      position: absolute;
      bottom: 0px;
      left: 0;
      display: block;
      background-image: linear-gradient(
        -180deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.8) 34%,
        rgba(255, 255, 255, 0.95) 66%,
        #fff 100%
      );
      text-align: center;
      color: #f86442;
      .icon2 {
        position: absolute;
        bottom: 20px;
        &::before {
          content: "\e61c";
          font-family: "iconfont";
          font-size: 16px;
        }
      }
    }
  }
  .header_contentSize2 {
    height: 100%;
  }
  .header-btn {
    margin-top: 20px;
    text-align: center;

    .btn {
      width: 235px;
      height: 41px;
      background-image: linear-gradient(-269deg, #ff8b70 2%, #f86442 99%);
      color: #fff;
      text-align: center;
      font-size: 15px;
      line-height: 41px;
      animation: scaleDrew 2.5s ease-in-out infinite;
    }
    @keyframes scaleDrew {
      0% {
        transform: scale(1);
      }
      25% {
        transform: scale(1.05);
      }
      50% {
        transform: scale(1);
      }
      75% {
        transform: scale(1.05);
      }
    }
  }
  .header-list {
    padding: 15px 15px 0;
    .list-header {
      display: flex;
      justify-content: space-between;
      h2 {
        font-size: 18px;
        font-weight: 700;
        color: #333;
        line-height: 14px;
      }
      span {
        font-size: 14px;
        color: #999;
        letter-spacing: 1px;
        line-height: 14px;

        .icon3 {
          &::before {
            content: "\e6a0";
            font-family: "iconfont";
          }
        }
      }
    }
    .list-ul {
      .list-li {
        border-bottom: 1px solid #f3f4f5;
        display: flex;
        padding: 12px 0;
        justify-content: space-between;
        .list-a {
          .list-item {
            display: flex;
            .icon4 {
              &::before {
                content: "\e621";
                font-family: "iconfont";
                font-size: 26px;
                color: #999;
              }
            }
            span {
              display: block;
              margin: 0 10px;
              font-size: 16px;
              line-height: 26px;
              color: #333;
            }
          }
        }
        .list-icon {
          .icon5 {
            margin: 5px 10px 0 0;
            &::before {
              content: "\e600";
              font-family: "iconfont";
              font-size: 20px;
              color: #999;
            }
          }
        }
      }
    }
    .list-btn {
      .a {
        padding: 17px 0;
        font-size: 15px;
        display: flex;
        color: #f86442;
        font-weight: 700;
        display: block;
        p {
          display: block;
          text-align: center;
        }
        .icon5 {
          &::before {
            content: "\e608";
            font-family: "iconfont";
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
